import React from 'react'
import './Components.css'
import SwitchChoice from './SwitchPayNoState'
class SwitchPay extends React.Component{
    constructor() {
        super();
    }
    state = {
        payMethod:"BTC"
    }
    select=(choice)=>{
        return (evt)=>{
            this.setState({payMethod:choice})
        }
    }

    renderChoice = choice => {
        // create a set of cssClasses to apply
        const cssClasses = ["choice"];

        if (this.state.payMethod === choice) {
            cssClasses.push("active"); // add .active class
        }

        return (
            <div className={cssClasses.join(" ")} onClick={this.select(choice)}>
                {choice}
            </div>
        );
    };

    render() {
        return(
            <div>
                {this.renderChoice("CREDITCARD")}
                {this.renderChoice("BTC")}
                Pay with:{this.state.payMethod}
                <SwitchChoice ></SwitchChoice>
            </div>
        )
    }
}
export  default SwitchPay;